<template>
	<view class="home">
		<!-- 搜索栏 -->
		<view @click="toSearch" class="search-box">
			<search></search>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<swiperto></swiperto>
		</view>
		<!-- 分类标签 -->
		<cartHome></cartHome>
		<!-- 推荐歌单 -->
		<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
		<view>
			<text class="textList">推荐歌单</text>
			<uni-icons type="forward" size="15"></uni-icons>
			<scroll-view scroll-x="true" class="sc1">
				<view class="songListMap">
					<view class="songListItem">
						<view class="list1" v-for="item in slists" :key="item.listId" @tap="toSongList(item.listId)">
							<view class="list1Pho">
								<image :src="item.listPhoto" class="listItem"></image>
							</view>
							<view>
								<text class="listTex">{{item.listTittle}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
		</view>
		<!-- 精选音乐推荐 -->
		<view>
			<view class="jinxuan">
				<text class="textList" style="font-size: 34rpx;">精选音乐</text>
				<uni-icons type="forward" size="15"></uni-icons>
			</view>
			<scroll-view scroll-x="true" class="sc1">
				<view class="listMap">
					<view class="listInfo">
						<view class="info" v-for="item in perferSongInfo" :key="item.songId" @tap="toRadio(item.songId)">
							<view>
								<image :src="item.songPhoto" class="imageSong"></image>
							</view>
							<view class="songInfo">
								<view class="song">{{item.songName}}</view>
								<view class="singer">{{item.singerName}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
		</view>
		<!-- 推荐歌单 -->
		<view>
			<text class="textList">推荐专辑</text>
			<uni-icons type="forward" size="15"></uni-icons>
			<scroll-view scroll-x="true" class="sc1">
				<view class="list1"  v-for="item in CollInfo" :key="item.collId" @click="toCollInfo(item)">
					<view class="list1Pho">
						<image :src="item.collPhoto" class="listItem" mode="widthFix"></image>
					</view>
					<view>
						<text class="listTex1">{{item.collName}}</text>
					</view>
				</view>
			</scroll-view>
			<u-divider lineColor="#bfbec0" hairline="false"></u-divider>
		</view>
		<view style="height: 50px;"></view>
		<radioTo class="radioTo"></radioTo>
		<!-- 底部导航栏 -->
		<view>
			<TabBar currentTab="home"></TabBar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: "http://rrrlkahbf.hb-bkt.clouddn.com/photo/%E7%BD%B2%E5%89%8D%E8%A1%97%E5%B0%91%E5%B9%B4.jpg",
				perferSongInfo: [], //精选音乐
				CollInfo: [] ,//推荐歌单
				slists:[]
			}
		},
		methods: {
			async getSongInfo(num) {
				const {
					data: res
				} = await uni.$http.get('/song/findSongs?num='+num)
				this.perferSongInfo = res.data
				// console.log(this.perferSongInfo)
			},
			toSongList(item){
				uni.navigateTo({
					url:"/subpkg/toSongList/toSongList?listId="+item
				})
			},
			async getCollInfo() {
				const {
					data: res
				} = await uni.$http.get("/coll/find")
				this.CollInfo = res.data
				console.log(this.CollInfo);
			},
			async getInfo() {
				// console.log(item);
				const {
					data: res
				} = await uni.$http.get("/list/PerferList");
				console.log(res);
				// this.songs = res.data.songs
				this.slists = res.data
				// this.slists = res.data.slists
				// console.log(this.slists);
			},
			toSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search',
				})
			},
			toCollInfo(item){
				console.log(item.collId);
				uni.navigateTo({
					url: '/subpkg/toSongList/toSongList?CollId='+item.collId,
				})
			},
			toRadio(item){
				uni.navigateTo({
					url:"/pages/mus/mus?songId="+item
				})
			}
		},
		onLoad() {
			this.getSongInfo(9)
			this.getCollInfo()
			this.getInfo()
			console.log("11111111111111111111111111111111111"+uni.$inner);
		},
		onPullDownRefresh() {
			this.getSongInfo(9)
			this.getCollInfo()
			this.getInfo()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	.swiper {
		margin-top: 0rpx;
	}

	.home {
		background-color: #f0f0f0;
	}

	.songListItem{
			display: flex;
			flex-flow: wrap column;
			height: 720rpx;
	}
	
	.textList {
		font-weight: 600;
		margin-top: 40rpx;
		margin-left: 35rpx;
		margin-right: 20rpx;
		font-size: 34rpx;
	}

	.listItem {
		width: 250rpx;
		height: 250rpx;
		border-radius: 15%;
		box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, .2);
	}

	.list1 {
		margin: 20rpx;
		display: inline-block;
		width: 250rpx;
	}

	.listTex {
		width: 100%;
		font-size: 30rpx;
		// word-wrap: break-word;
		// word-break: normal;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: pre-wrap;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 20rpx;
		font-weight: 550;
	}

	.sc1 {
		white-space: nowrap;
		margin-bottom: 0rpx;
	}

	.jinxuan {
		margin: 20rpx;
	}

	.listMap {
		display: flex;

		.listInfo {
			display: flex;
			flex-flow: column wrap;
			margin: 30rpx;
			margin-bottom: 10rpx;
			height: 280px;

			.info {
				display: flex;
				margin: 8rpx;

				.imageSong {
					width: 80px;
					height: 80px;
					border-radius: 15%;
					box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, .2);
				}

				.songInfo {
					margin-left: 30rpx;
					padding-left: 30rpx;
					margin-top: 20rpx;
					margin-right: 200rpx;

					.song {
						font-size: 34rpx;
						font-weight: 600;
					}

					.singer {
						color: gray;
					}
				}
			}
		}
	}

	.radioTo {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.search-box {
		//设置吸顶效果
		position: sticky;
		//吸顶位置
		top: 0;
		//提高层级
		z-index: 999;
		background-color: #f0f0f0;
	}
	.listTex1{
		width: 100%;
		font-size: 30rpx;
		// word-wrap: break-word;
		// word-break: normal;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: pre-wrap;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 20rpx;
		font-weight: 550;
	}
</style>
